<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>添加商品信息</title>
  <%
  String path=request.getContextPath();
  String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  %>
  <base href="<%=basePath%>">
    <title>Title</title>
  <link rel="stylesheet" href="layui-v2.6.5/layui/css/layui.css">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="layui-v2.6.5/layui/layui.js"></script>
</head>
<body>
<div>
  <br>
  <br>
<form action="" class="layui-form" method="post" id="form_">
  <input type="hidden" name="action" value="add">
  <div class="layui-form-item">
    <label class="layui-form-label">商品编号:</label>
    <div class="layui-input-inline">
      <input type="text" name="pid" placeholder="请输入" autocomplete="off" class="layui-input" lay-verify="required">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">商品名称:</label>
    <div class="layui-input-inline">
      <input type="text" name="pname" placeholder="请输入" autocomplete="off" class="layui-input" lay-verify="required">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">商品颜色:</label>
    <div class="layui-input-inline">
      <input type="text" name="pcolor" placeholder="请输入" autocomplete="off" class="layui-input" lay-verify="required">
    </div>
  </div>
<%--  <div class="layui-form-item">--%>
<%--    <label class="layui-form-label">商品尺码:</label>--%>
<%--    <div class="layui-input-inline">--%>
<%--      <input type="text" name="psize" placeholder="请输入" autocomplete="off" class="layui-input" lay-verify="required">--%>
<%--    </div>--%>
<%--  </div>--%>
  <div class="layui-form-item">
    <label class="layui-form-label">商品尺码:</label>
    <div class="layui-input-inline">
      <select name="city" lay-verify="required">
        <option value=""></option>
        <option value="XS">XS</option>
        <option value="S">S</option>
        <option value="M">M</option>
        <option value="L">L</option>
        <option value="XL">XL</option>
        <option value="XXL">XXL</option>
        <option value="XXXL">XXXL</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">商品单价:</label>
    <div class="layui-input-inline">
      <input type="text" name="price" placeholder="请输入" autocomplete="off" class="layui-input" lay-verify="required">
    </div>
  </div>
<%--  <div class="layui-input-block">--%>
<%--&lt;%&ndash;    上传按钮&ndash;%&gt;--%>
<%--    <button type="button" class="layui-btn" id="upload1">上传图片</button>--%>
<%--&lt;%&ndash;    隐藏的input&ndash;%&gt;--%>
<%--    <input type="hidden" id="img_url" name="img" value=""/>--%>
<%--&lt;%&ndash;    预览区域&ndash;%&gt;--%>
<%--    <div class="layui-upload-list">--%>
<%--      <img class="layui-upload-img" width="100px" height="80px" id="demo1"/>--%>
<%--      <p id="demoText"></p>--%>
<%--    </div>--%>
<%--  </div>--%>
  <button lay-submit class="layui-btn layui-btn-normal" lay-filter="add">添加</button>
</form>
</div>
<script>
  layui.use(['upload', 'element', 'layer','form'], function(){
    var form = layui.form;
    var $ = layui.jquery
            ,upload = layui.upload
            ,element = layui.element
            ,layer = layui.layer;

    // var uploadInst = upload.render({
    //   elem: '#upload1' //绑定元素
    //   ,url: '/manager/commodityServlet?action=add' //上传接口
    //   ,before: function(obj){
    //     //预读本地文件示例，不支持ie8
    //     obj.preview(function(index, file, result){
    //       $('#demo1').attr('src', result); //图片链接（base64）
    //     });
    //   }
    //   ,done: function(res){
    //     //如果上传失败
    //     if(res.code > 0){
    //       return layer.msg('上传失败');
    //     }
    //     //上传成功
    //     alert("上传成功"+res.url);
    //     document.getElementById("img_url").value = res.url;
    //
    //   }
    //   ,error: function(){
    //     //演示失败状态，并实现重传
    //     var demoText = $('#demoText');
    //     demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
    //     demoText.find('.demo-reload').on('click', function(){
    //       uploadInst.upload();
    //     });
    //   }
    // });

    $(function (){
      $("#form_").submit(function (){
        $.get("manager/commodityServlet", $(this).serialize(), function (data){
          if(data.flag){
            layer.msg('添加成功!');
          }
          else {
            layer.msg(data.errorMsg);
          }
        })
        return false;
      })
    })
  });
</script>
</body>
</html>